<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    draggable
    class="dialog-wrap"
    width="1400px"
  >
    <template #header>
      <div class="dialog-title">
        {{ title }}
      </div>
    </template>

    <div class="w">
      <div class="filter">
        <div class="filter-l">
          <el-button type="primary" plain @click="add"> 新增班级学生 </el-button>

          <el-button type="danger" plain :disabled="selection.length < 1" @click="delAll">
            批量移出
          </el-button>
        </div>
        <div class="filter-r"><table-filter @save="filterChange" /></div>
      </div>

      <!-- 表格 -->
      <table-body
        ref="table"
        v-model="selection"
        v-loading="loading"
        class="body"
        :list="list"
        @del="del"
      />

      <!-- 翻页 -->
      <div class="footer">
        <el-pagination
          v-model:page-size="queryData.pageSize"
          v-model:current-page="queryData.pageNum"
          layout="total,->,prev, pager, next ,sizes ,jumper"
          :pager-count="5"
          :total="pageTotal"
          background
          @size-change="request"
          @current-change="request"
        />
      </div>
    </div>
    <table-add ref="editDialog" @save="addStudent" />
  </el-dialog>
</template>

<script setup>
import $api from './api.js'
import { extend } from '@/utils/tool.js'
import TableFilter from './student-filter.vue'
import TableBody from './student-body.vue'
import TableAdd from './student-add.vue'

const emits = defineEmits(['save'])
const { proxy } = getCurrentInstance()
const editDialog = ref(null)

// data
const dialogFormVisible = ref(false)
const title = ref('班级学生列表')
const selection = ref([])
const list = ref([])
const queryData = ref({
  classId: '',
  pageNum: 1,
  pageSize: 10,

  studentCode: '',
  studentName: '',
  studentCallNum: '',
})
const loading = ref(false)
const pageTotal = ref(0)

// 方法
async function load(d) {
  dialogFormVisible.value = true
  await nextTick()
  reset()
  queryData.value.classId = d.id
  request()
}

function reset() {
  queryData.value.pageNum = 1
  queryData.value.pageSize = 10
  queryData.value.classId = ''
  queryData.value.studentCode = ''
  queryData.value.studentName = ''
  queryData.value.studentCallNum = ''
  list.value = []
}

function request() {
  const sendData = {
    ...queryData.value,
  }
  loading.value = true
  $api
    .studentList(sendData)
    .then((res) => {
      list.value = []
      list.value = res.rows
      pageTotal.value = res.total
    })
    .finally(() => {
      loading.value = false
    })
}

function filterChange(d) {
  queryData.value = {
    ...queryData.value,
    ...d,
  }
  queryData.value.pageNum = 1
  request()
}

function add() {
  // 调用子组件的方法
  editDialog.value.load(queryData.value.classId)
}

function delAll() {
  proxy
    .$confirm('确定要移出选中的人员吗？', '移出确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      const ids = selection.value
      _del(ids)
    })
}

function del(row) {
  proxy
    .$confirm('确定要移出选中的人员吗？', '移出确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      _del([row.id])
    })
}

function _del(ids) {
  $api.studentUnbind(ids).then((res) => {
    proxy.$message.success('删除成功!')
    request()
  })
}

function addStudent(ids) {
  const sendData = {
    classId: queryData.value.classId,
    studentIds: ids,
  }
  $api.studentBind(sendData).then((res) => {
    request()
  })
}

defineExpose({
  load,
})
</script>

<style lang="scss" scoped>
.w {
  .filter {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .body {
    margin-bottom: 20px;
    height: 550px;
  }
  .footer {
  }
}
</style>
